<template>
  <div class="detail_container">
    <h1 class="article_title">{{article.title}}</h1>
    <!-- 用户信息 -->
    <van-cell
      :border="false"
      center
      class="user-info"
    >
      <van-image
        :round="true"
        :src="article.aut_photo"
        class="avatar"
        fit="cover"
        height="38"
        slot="icon"
        width="38"
        @click="$router.push(`/detail/${article.aut_id}`)"
      />
      <div
        class="user-name"
        slot="title"
      >{{article.aut_name}}</div>
      <div
        class="publish-date"
        slot="label"
      >{{article.pubdate | relativeTime}}</div>
      <van-button
        @click="followUser"
        class="follow-btn"
        color="#3296fa"
        icon="plus"
        round
        size="small"
        type="info"
        v-if="isFollow && !showAdd"
      >关注</van-button>
      <van-button
        @click="cancalFollow"
        class="follow-btn"
        round
        size="small"
        v-if="isFollow && showAdd"
      >已关注</van-button>
    </van-cell>
    <!-- /用户信息 -->

    <!-- 文章内容 -->
    <div
      class="markdown-body"
      v-html="article.content"
    ></div>
    <van-divider>正文结束</van-divider>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { addFollow, deleteFollow } from "../../../network/article";

export default {
  name: "ArticleDetail",
  props: ["article"],
  components: {},
  computed: {
    ...mapState(["userInfo"])
  },
  watch: {
    article() {
      if (this.userInfo.id !== this.article.aut_id) {
        this.isFollow = true
      }
      this.showAdd = this.article.is_followed
    }
  },
  data() {
    return {
      isFollow: false,
      showAdd: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    //关注用户
    async followUser() {
      const result = await addFollow(this.article.aut_id);
      if (result.message === "OK") {
        this.$toast.success("关注成功");
        this.showAdd = true;
      } else {
        this.$toast.fail("关注失败");
      }
    },
    //取消关注
    async cancalFollow() {
      const result = await deleteFollow(this.article.aut_id);
      if (result.data === "") {
        this.$toast.success("取消关注");
        this.showAdd = false;
      } else {
        this.$toast.fail("取消失败");
      }
    }
  }
};
</script>

<style scoped lang="stylus" >
.detail_container
  background-color #fff
  padding 10px

  h1
    padding 0
    margin 0
    font-size 16px

.van-cell
  padding 0
  margin 20px 0 10px

.van-cell__title
  margin-left 10px

  .user-name
    height 18px

  .publish-date
    height 15px
</style>